<template>
  <div class="ai-features-page">
    <!-- 自定义导航栏 -->
    <div class="custom-header">
      <van-nav-bar
        title="AI功能中心"
        left-arrow
        @click-left="$router.go(-1)"
        class="header-nav"
      >
        <template #right>
          <van-icon name="search" @click="showSearch = true" />
        </template>
      </van-nav-bar>
      
      <!-- 用户状态栏 -->
      <div class="user-status-bar">
        <div class="user-info">
          <div class="user-avatar">{{ userInfo?.nickname?.charAt(0) || '用' }}</div>
          <div class="user-details">
            <div class="user-name">{{ userInfo?.nickname || '用户' }}</div>
            <div class="user-level">AI体验师 Lv.{{ userLevel }}</div>
          </div>
        </div>
        <div class="user-stats">
          <div class="stat-item">
            <span class="stat-value">{{ todayUsage }}</span>
            <span class="stat-label">今日使用</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ totalUsage }}</span>
            <span class="stat-label">总计使用</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速访问 -->
    <div class="quick-access-section">
      <div class="section-header">
        <h3>⚡ 快速访问</h3>
        <span class="section-desc">最常用的AI功能</span>
      </div>
      <div class="quick-access-grid">
        <div
          v-for="item in quickAccessItems"
          :key="item.id"
          class="quick-access-item"
          @click="navigateToFeature(item)"
        >
          <div class="quick-icon">{{ item.icon }}</div>
          <span class="quick-name">{{ item.name }}</span>
          <div class="quick-badge" v-if="item.badge">{{ item.badge }}</div>
        </div>
      </div>
    </div>

    <!-- AI功能分类 -->
    <div class="features-section">
      <div class="section-header">
        <h3>🎯 AI功能</h3>
        <span class="section-desc">探索强大的AI能力</span>
      </div>
      
      <!-- 功能分类标签 -->
      <div class="category-tabs">
        <div
          v-for="category in categories"
          :key="category.id"
          :class="['category-tab', { active: activeCategory === category.id }]"
          @click="activeCategory = category.id"
        >
          <span class="tab-icon">{{ category.icon }}</span>
          <span class="tab-name">{{ category.name }}</span>
        </div>
      </div>

      <!-- 功能列表 -->
      <div class="features-grid">
        <div
          v-for="feature in filteredFeatures"
          :key="feature.id"
          class="feature-card"
          @click="navigateToFeature(feature)"
        >
          <div class="feature-header">
            <div class="feature-icon">{{ feature.icon }}</div>
            <div class="feature-status" v-if="feature.status">
              <span :class="['status-dot', feature.status]"></span>
              <span class="status-text">{{ getStatusText(feature.status) }}</span>
            </div>
          </div>
          
          <div class="feature-content">
            <h4 class="feature-title">{{ feature.name }}</h4>
            <p class="feature-desc">{{ feature.description }}</p>
            
            <div class="feature-stats" v-if="feature.stats">
              <div class="stat-item" v-for="stat in feature.stats" :key="stat.label">
                <span class="stat-value">{{ stat.value }}</span>
                <span class="stat-label">{{ stat.label }}</span>
              </div>
            </div>
          </div>
          
          <div class="feature-footer">
            <div class="feature-tags">
              <span
                v-for="tag in feature.tags"
                :key="tag"
                class="feature-tag"
              >
                {{ tag }}
              </span>
            </div>
            <van-icon name="arrow" class="feature-arrow" />
          </div>
        </div>
      </div>
    </div>

    <!-- 最近使用 -->
    <div class="recent-section" v-if="recentFeatures.length > 0">
      <div class="section-header">
        <h3>🕒 最近使用</h3>
        <van-button size="mini" type="default" @click="clearRecent">清空</van-button>
      </div>
      <div class="recent-list">
        <div
          v-for="item in recentFeatures"
          :key="item.id"
          class="recent-item"
          @click="navigateToFeature(item)"
        >
          <div class="recent-icon">{{ item.icon }}</div>
          <div class="recent-info">
            <div class="recent-name">{{ item.name }}</div>
            <div class="recent-time">{{ formatTime(item.lastUsed) }}</div>
          </div>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>

    <!-- 推荐功能 -->
    <div class="recommendation-section">
      <div class="section-header">
        <h3>💡 为您推荐</h3>
        <span class="section-desc">基于您的使用习惯</span>
      </div>
      <div class="recommendation-cards">
        <div
          v-for="rec in recommendations"
          :key="rec.id"
          class="recommendation-card"
          @click="navigateToFeature(rec)"
        >
          <div class="rec-icon">{{ rec.icon }}</div>
          <div class="rec-content">
            <h4>{{ rec.name }}</h4>
            <p>{{ rec.reason }}</p>
          </div>
          <div class="rec-score">{{ rec.score }}%匹配</div>
        </div>
      </div>
    </div>

    <!-- 搜索弹窗 -->
    <van-popup v-model:show="showSearch" position="top" :style="{ height: '100%' }">
      <div class="search-container">
        <div class="search-header">
          <van-search
            v-model="searchQuery"
            placeholder="搜索AI功能..."
            @search="handleSearch"
            @cancel="showSearch = false"
            show-action
          />
        </div>
        <div class="search-content">
          <div v-if="searchResults.length === 0 && searchQuery" class="search-empty">
            <div class="empty-icon">🔍</div>
            <p>未找到相关功能</p>
          </div>
          <div v-else class="search-results">
            <div
              v-for="result in searchResults"
              :key="result.id"
              class="search-result-item"
              @click="navigateToFeature(result)"
            >
              <div class="result-icon">{{ result.icon }}</div>
              <div class="result-info">
                <div class="result-name">{{ result.name }}</div>
                <div class="result-desc">{{ result.description }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>

    <!-- 功能介绍弹窗 -->
    <van-popup v-model:show="showFeatureIntro" position="bottom" :style="{ height: '60%' }">
      <div class="feature-intro-container" v-if="selectedFeature">
        <div class="intro-header">
          <h3>{{ selectedFeature.name }}</h3>
          <van-button size="small" @click="showFeatureIntro = false">关闭</van-button>
        </div>
        <div class="intro-content">
          <div class="intro-icon">{{ selectedFeature.icon }}</div>
          <p class="intro-desc">{{ selectedFeature.detailedDescription || selectedFeature.description }}</p>
          
          <div class="intro-features" v-if="selectedFeature.features">
            <h4>主要功能：</h4>
            <ul>
              <li v-for="feature in selectedFeature.features" :key="feature">{{ feature }}</li>
            </ul>
          </div>
          
          <div class="intro-examples" v-if="selectedFeature.examples">
            <h4>使用示例：</h4>
            <div class="example-tags">
              <span
                v-for="example in selectedFeature.examples"
                :key="example"
                class="example-tag"
              >
                {{ example }}
              </span>
            </div>
          </div>
        </div>
        <div class="intro-footer">
          <van-button type="primary" block @click="navigateToFeature(selectedFeature)">
            立即体验
          </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { getUserInfo } from '@/utils/auth'
import { useAIService } from '@/utils/aiServiceManager'

const router = useRouter()
const aiService = useAIService()

// 响应式数据
const showSearch = ref(false)
const showFeatureIntro = ref(false)
const searchQuery = ref('')
const activeCategory = ref('all')
const selectedFeature = ref<any>(null)
const userLevel = ref(5)
const todayUsage = ref(12)
const totalUsage = ref(156)

// 用户信息
const userInfo = computed(() => getUserInfo())

// 快速访问项目
const quickAccessItems = ref([
  { id: 'knowledge-qa', name: '知识问答', icon: '🧠', route: '/ai-features/knowledge-qa', badge: 'HOT' },
  { id: 'image-generation', name: '图像生成', icon: '🎨', route: '/ai-features/image-generation' },
  { id: 'translation', name: '智能翻译', icon: '🌐', route: '/ai-features/translation' },
  { id: 'voice-call', name: '语音通话', icon: '📞', route: '/voice-call' }
])

// 功能分类
const categories = ref([
  { id: 'all', name: '全部', icon: '📋' },
  { id: 'chat', name: '对话', icon: '💬' },
  { id: 'creative', name: '创作', icon: '🎨' },
  { id: 'productivity', name: '效率', icon: '⚡' },
  { id: 'entertainment', name: '娱乐', icon: '🎮' }
])

// AI功能列表
const aiFeatures = ref([
  {
    id: 'knowledge-qa',
    name: '知识问答',
    description: '回答各种学科问题，知识渊博的AI助手',
    detailedDescription: '基于大语言模型的智能问答系统，可以回答历史、科学、技术、文化等各个领域的问题。',
    icon: '🧠',
    category: 'chat',
    route: '/ai-features/knowledge-qa-optimized',
    status: 'online',
    tags: ['问答', '学习', '知识'],
    stats: [
      { label: '准确率', value: '98%' },
      { label: '响应时间', value: '1.2s' }
    ],
    features: ['多领域知识问答', '上下文理解', '详细解释', '相关推荐'],
    examples: ['什么是人工智能？', '太阳系有几颗行星？', '中国古代四大发明']
  },
  {
    id: 'image-generation',
    name: 'AI图像生成',
    description: '根据文字描述生成精美图像',
    detailedDescription: '使用先进的扩散模型技术，根据您的文字描述生成高质量的图像作品。',
    icon: '🎨',
    category: 'creative',
    route: '/ai-features/image-generation-optimized',
    status: 'online',
    tags: ['图像', '创作', '艺术'],
    stats: [
      { label: '生成速度', value: '15s' },
      { label: '成功率', value: '95%' }
    ],
    features: ['多种艺术风格', '高清图像输出', '批量生成', '风格迁移'],
    examples: ['一只可爱的小猫', '未来科技城市', '梦幻森林精灵']
  },
  {
    id: 'translation',
    name: '智能翻译',
    description: '多语言智能翻译，准确流畅',
    icon: '🌐',
    category: 'productivity',
    route: '/ai-features/translation',
    status: 'online',
    tags: ['翻译', '语言', '沟通'],
    stats: [
      { label: '支持语言', value: '100+' },
      { label: '准确率', value: '96%' }
    ]
  },
  {
    id: 'emotional-companion',
    name: '情感陪伴',
    description: '温暖的AI伙伴，倾听与陪伴',
    icon: '💝',
    category: 'chat',
    route: '/ai-features/emotional-companion',
    status: 'online',
    tags: ['陪伴', '情感', '心理'],
    stats: [
      { label: '满意度', value: '99%' },
      { label: '响应时间', value: '0.8s' }
    ]
  },
  {
    id: 'information-query',
    name: '信息查询',
    description: '实时信息检索，快速获取答案',
    icon: '🔍',
    category: 'productivity',
    route: '/ai-features/information-query',
    status: 'online',
    tags: ['搜索', '信息', '查询']
  },
  {
    id: 'recommendation',
    name: '智能推荐',
    description: '个性化推荐，发现更多可能',
    icon: '🎯',
    category: 'productivity',
    route: '/ai-features/recommendation',
    status: 'beta',
    tags: ['推荐', '个性化', '发现']
  },
  {
    id: 'game-entertainment',
    name: '游戏娱乐',
    description: 'AI陪你玩游戏，寓教于乐',
    icon: '🎮',
    category: 'entertainment',
    route: '/ai-features/game-entertainment',
    status: 'beta',
    tags: ['游戏', '娱乐', '互动']
  },
  {
    id: 'health-management',
    name: '健康管理',
    description: 'AI健康顾问，关爱您的健康',
    icon: '🏥',
    category: 'productivity',
    route: '/ai-features/health-management',
    status: 'coming-soon',
    tags: ['健康', '管理', '建议']
  }
])

// 最近使用
const recentFeatures = ref([
  { ...aiFeatures.value[0], lastUsed: Date.now() - 1000 * 60 * 30 },
  { ...aiFeatures.value[1], lastUsed: Date.now() - 1000 * 60 * 60 * 2 }
])

// 推荐功能
const recommendations = ref([
  {
    ...aiFeatures.value[2],
    reason: '基于您的学习需求',
    score: 95
  },
  {
    ...aiFeatures.value[3],
    reason: '适合放松心情',
    score: 88
  }
])

// 计算属性
const filteredFeatures = computed(() => {
  if (activeCategory.value === 'all') {
    return aiFeatures.value
  }
  return aiFeatures.value.filter(feature => feature.category === activeCategory.value)
})

const searchResults = computed(() => {
  if (!searchQuery.value) return []
  
  return aiFeatures.value.filter(feature =>
    feature.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
    feature.description.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
    feature.tags?.some(tag => tag.toLowerCase().includes(searchQuery.value.toLowerCase()))
  )
})

// 方法
const navigateToFeature = (feature: any) => {
  if (feature.status === 'coming-soon') {
    showToast('功能即将上线，敬请期待！')
    return
  }
  
  // 添加到最近使用
  addToRecent(feature)
  
  // 导航到功能页面
  if (feature.route) {
    router.push(feature.route)
  } else {
    showToast('功能开发中...')
  }
}

const addToRecent = (feature: any) => {
  const existingIndex = recentFeatures.value.findIndex(item => item.id === feature.id)
  
  if (existingIndex > -1) {
    recentFeatures.value.splice(existingIndex, 1)
  }
  
  recentFeatures.value.unshift({
    ...feature,
    lastUsed: Date.now()
  })
  
  // 限制最近使用数量
  if (recentFeatures.value.length > 5) {
    recentFeatures.value = recentFeatures.value.slice(0, 5)
  }
}

const clearRecent = () => {
  recentFeatures.value = []
  showToast('已清空最近使用')
}

const handleSearch = () => {
  if (searchResults.value.length === 1) {
    navigateToFeature(searchResults.value[0])
    showSearch.value = false
  }
}

const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    'online': '正常',
    'beta': '测试',
    'coming-soon': '即将上线',
    'maintenance': '维护中'
  }
  return statusMap[status] || status
}

const formatTime = (timestamp: number) => {
  const now = Date.now()
  const diff = now - timestamp
  
  if (diff < 1000 * 60) {
    return '刚刚'
  } else if (diff < 1000 * 60 * 60) {
    return `${Math.floor(diff / (1000 * 60))}分钟前`
  } else if (diff < 1000 * 60 * 60 * 24) {
    return `${Math.floor(diff / (1000 * 60 * 60))}小时前`
  } else {
    return new Date(timestamp).toLocaleDateString()
  }
}

// 生命周期
onMounted(async () => {
  // 加载用户统计数据
  try {
    const userStats = await aiService.getUserStats(userInfo.value?.id || 1)
    if (userStats) {
      todayUsage.value = userStats.todayUsage || 0
      totalUsage.value = userStats.totalUsage || 0
      userLevel.value = userStats.level || 1
    }
  } catch (error) {
    console.error('加载用户统计失败:', error)
  }
})

// 监听搜索查询变化
watch(searchQuery, (newQuery) => {
  if (!newQuery) {
    // 清空搜索时可以显示推荐或历史
  }
})
</script>

<style scoped>
.ai-features-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.custom-header {
  background: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.header-nav {
  background: transparent;
}

.user-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
}

.user-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
}

.user-level {
  font-size: 12px;
  opacity: 0.8;
}

.user-stats {
  display: flex;
  gap: 16px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 18px;
  font-weight: 600;
}

.stat-label {
  font-size: 12px;
  opacity: 0.8;
}

.quick-access-section,
.features-section,
.recent-section,
.recommendation-section {
  padding: 20px 16px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.section-desc {
  font-size: 14px;
  color: #64748b;
}

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.quick-access-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: white;
  border-radius: 12px;
  padding: 16px 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-access-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.quick-icon {
  font-size: 24px;
}

.quick-name {
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  text-align: center;
}

.quick-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 8px;
}

.category-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.category-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-size: 14px;
}

.category-tab:hover {
  border-color: #3b82f6;
  background: #eff6ff;
}

.category-tab.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}

.tab-icon {
  font-size: 16px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.feature-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid #e2e8f0;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border-color: #3b82f6;
}

.feature-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.feature-icon {
  font-size: 32px;
}

.feature-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-dot.online {
  background: #10b981;
}

.status-dot.beta {
  background: #f59e0b;
}

.status-dot.coming-soon {
  background: #6b7280;
}

.feature-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 8px 0;
}

.feature-desc {
  font-size: 14px;
  color: #64748b;
  line-height: 1.4;
  margin: 0 0 12px 0;
}

.feature-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.feature-stats .stat-item {
  text-align: left;
}

.feature-stats .stat-value {
  font-size: 14px;
  font-weight: 600;
  color: #3b82f6;
}

.feature-stats .stat-label {
  font-size: 12px;
  color: #64748b;
}

.feature-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feature-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.feature-tag {
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
}

.feature-arrow {
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.feature-card:hover .feature-arrow {
  transform: translateX(4px);
}

.recent-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.recent-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.recent-icon {
  font-size: 20px;
}

.recent-info {
  flex: 1;
}

.recent-name {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
}

.recent-time {
  font-size: 12px;
  color: #64748b;
}

.recommendation-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recommendation-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.recommendation-card:hover {
  transform: scale(1.02);
}

.rec-icon {
  font-size: 24px;
}

.rec-content {
  flex: 1;
}

.rec-content h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.rec-content p {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;
}

.rec-score {
  font-size: 12px;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 8px;
  border-radius: 12px;
}

.search-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.search-header {
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.search-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.search-empty {
  text-align: center;
  padding: 40px 20px;
  color: #64748b;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-result-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.result-icon {
  font-size: 20px;
}

.result-info {
  flex: 1;
}

.result-name {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 2px;
}

.result-desc {
  font-size: 12px;
  color: #64748b;
}

.feature-intro-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.intro-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.intro-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.intro-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  text-align: center;
}

.intro-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.intro-desc {
  font-size: 16px;
  color: #374151;
  line-height: 1.6;
  margin-bottom: 24px;
}

.intro-features,
.intro-examples {
  text-align: left;
  margin-bottom: 24px;
}

.intro-features h4,
.intro-examples h4 {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 12px 0;
}

.intro-features ul {
  margin: 0;
  padding-left: 20px;
}

.intro-features li {
  font-size: 14px;
  color: #374151;
  margin-bottom: 8px;
}

.example-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.example-tag {
  background: #f1f5f9;
  color: #475569;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
}

.intro-footer {
  padding: 16px;
  border-top: 1px solid #e2e8f0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .quick-access-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .user-stats {
    gap: 12px;
  }
  
  .stat-value {
    font-size: 16px;
  }
  
  .category-tabs {
    gap: 6px;
  }
  
  .category-tab {
    padding: 6px 12px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .quick-access-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .user-status-bar {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  
  .user-info {
    justify-content: center;
  }
}
</style>
